<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增农户管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <meta charset="UTF-8">
    <title>添加农户管理</title>
</head>
<body>
<div class="main-content">
    <form class="form-horizontal" id="form-family_admin-add" >
        <h4 class="form-header h4">添加农户管理</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">姓名：</label>
                    <div class="col-sm-8">
                        <input name="name" placeholder="请输入姓名" class="form-control valid" type="text" maxlength="30"  aria-required="true" aria-invalid="false" required>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">证件号码：</label>
                    <div class="col-sm-8">
                        <input name="idCard" placeholder="请输入证件号码" id="idCard" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false" onblur="checkPhoneUnique()">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">文化程度：</label>
                    <div class="col-sm-8">
                        <select  name="educationDegree" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_farmer_education_dearee')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">在校情况：</label>
                    <div class="col-sm-8">
                        <input name="studentStatus" placeholder="请输入在校情况" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">民族：</label>
                    <div class="col-sm-8">
                        <input name="nationality" placeholder="请输入民族" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">健康状况：</label>
                    <div class="col-sm-8">
                        <select  name="healthCondition" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_farmer_health_condition')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">劳动技能：</label>
                    <div class="col-sm-8">
                        <select name="laborSkill" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_farmer_labor_skill')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">户编号：</label>
                    <div class="col-sm-8">
                        <input name="fid" placeholder="请输入户编号" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">自然村：</label>
                    <div class="col-sm-8">
                        <select name="natVillage" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_nature_village')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div></div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">户类型：</label>
                    <div class="col-sm-8">
                        <select name="familyType" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_family_type')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div></div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">致贫原因：</label>
                    <div class="col-sm-8">
                        <select name="povertyCause" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_farmer_poverty_cause')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div></div></div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">实际耕种：</label>
                    <div class="col-sm-8">
                        <input name="area" placeholder="请输入实际耕种" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">二轮（确权）面积：</label>
                    <div class="col-sm-8">
                        <input name="twoArea" placeholder="请输入二轮（确权）面积" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
                    </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">其他面积：</label>
                    <div class="col-sm-8">
                        <input name="otherArea" placeholder="请输入其他面积" class="form-control valid" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">与户主关系：</label>
                    <div class="col-sm-8">
                        <select name="relationship" class="form-control m-b select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true" th:with="type=${@dict.getType('base_family_relationship')}" required>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div></div></div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">户联系电话：</label>
                    <div class="col-sm-8">
                        <input name="phone" placeholder="请输入户联系电话" class="form-control" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div></div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">人员识别时间：</label>
                    <div class="col-sm-8">
                        <input name="registrationTime" placeholder="yyyy-MM-dd" class="form-control" type="text" maxlength="30" required="" aria-required="true" aria-invalid="false">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <a class="btn btn-primary btn-rounded btn-sm" onclick="submit()">&nbsp;&nbsp;保存&nbsp;&nbsp;</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="btn btn-warning btn-rounded btn-sm" onclick="closePage()">&nbsp;&nbsp;关闭&nbsp;&nbsp;</a>
        </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/farmer"

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-farmer-add').serialize());
        }
    }

    $("input[name='registrationTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>

<script th:inline="javascript">
    $(document).click(function (e){
        $(e.target).css("background-color", "");
    })
    //表单验证
    function verification(){
        let flag = false;
        let siblings = document.getElementsByClassName("is-required");
        for(const item of siblings){
            let child = item.parentElement.children;
            //console.log(child);
            let formInput = $(child).find("input");
            let formSelect = $(child).find("select");
            //console.log("formSelect = " + formSelect.find("option:selected").val());
            if(formInput.val() == ""){
                $(formInput).css("background-color","#f4cccc");
                flag = true;
            }
            if(formSelect != null && formSelect.find("option:selected").val() == "0"){
                $(formSelect).css("background-color","#f4cccc");
                flag = true;
            }
        }
        return flag;
    }


    function submit(){
        //表单验证
        let flag = verification();
        if(flag) {
            $.modal.msgError('请填写必选项！');
            return 0;
        }
        //  写一个ajax，将得到的值放在一个map里，传给后端，后端update相关表，返回success值
        var name = document.querySelector("input[name='name']").value;
        var idCard = document.querySelector("input[name='idCard']").value;
        var educationDegree = document.querySelector("select[name='educationDegree']").value;
        var studentStatus = document.querySelector("input[name='studentStatus']").value;
        var nationality = document.querySelector("input[name='nationality']").value;
        var healthCondition = document.querySelector("select[name='healthCondition']").value;
        var laborSkill = document.querySelector("select[name='laborSkill']").value;
        var fid = document.querySelector("input[name='fid']").value;
        var natVillage = document.querySelector("select[name='natVillage']").value;
        var familyType = document.querySelector("select[name='familyType']").value;
        var povertyCause = document.querySelector("select[name='povertyCause']").value;
        var area = document.querySelector("input[name='area']").value;
        var twoArea = document.querySelector("input[name='twoArea']").value;
        var otherArea = document.querySelector("input[name='otherArea']").value;
        var relationship = document.querySelector("select[name='relationship']").value;
        var phone = document.querySelector("input[name='phone']").value;
        var registrationTime = document.querySelector("input[name='registrationTime']").value;

        const farmer = {
            name,
            idCard,
            educationDegree,
            studentStatus,
            nationality,
            healthCondition,
            laborSkill,
            fid,
            natVillage,
            familyType,
            povertyCause,
            area,
            twoArea,
            otherArea,
            relationship,
            phone,
            registrationTime,
        }
        const successTip = async(code)=>{
            $.modal.msgSuccess('保存成功！');
            return new Promise((resolve,reject)=>{
                    resolve();
             })
        }
        $.ajax({
            headers:{
                "Content-Type": "application/json;charset=utf-8",
            },
            type:"post",
            url:prefix + "/add",
            data: JSON.stringify(farmer),
            success(res){
                if (res.code == 0){
                    const d= successTip(res.code)
                    d.then(()=>{
                        setTimeout(()=>{
                            window.parent.location.reload();
                        },500)
                    })
                }
                else {
                    $.modal.msgError('保存失败！');
                }
            }
        })
    }

    function closePage(){
        window.parent.location.reload();
    }
</script>

<script th:inline="javascript">
<!--    校验证件号码-->
    function checkPhoneUnique(){
        var idCard = document.querySelector("input[name='idCard']").value;
        $.ajax({
            type:"post",
            url:prefix + "/checkIdCardUnique",
            data: {
                "idCard":idCard
            },
            success(res){
                if (res > 0){
                    //前端已经判断，后端不需要判断如果同一个人注册两次
                    alert("该身份证已经被注册!");
                }
                else if (res == 0){
                    $("#name").css('background-color',''); //取消css样式
                }
            }
        })
    }
</script>

</body>
</html>